<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vue示例</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/vue/3.2.40/vue.global.js"></script>
  </head>

  <body>
    <div id="app">
      <!-- 遍历数组 -->
      <!-- <ul>
    <li v-for="(item,index) in person">
        {{item.id}}---{{item.name}}***{{item.age}}////{{index}}
    </li>
</ul> -->

      <!-- 遍历对象 -->
      <ul>
        <li v-for="(value,key,index) of obj">
          {{value}}---{{key}}----{{index}}
        </li>
      </ul>

      <!-- 遍历字符串 -->
      <ul>
        <li v-for="(value,index) of str">{{value}}-------{{index}}</li>
      </ul>
      <!-- 《遍历数字 -->
      <ul>
        <li v-for="count of 9">{{count}}</li>
      </ul>
      <!-- 99乘法表格 -->
      <p v-for="n in arr">
        <b v-for="m in n"> {{m}}*{{n}}={{m*n}} &nbsp;&nbsp;&nbsp;&nbsp; </b>
      </p>
    </div>
    <script>
      const { ref } = Vue;
      const app = Vue.createApp({
      
        setup(props) {
          let person = ref([
            { id: 001, name: "jack", age: 18 },
            { id: 002, name: "tom", age: 20 },
            { id: 003, name: "mary", age: 28 },
          ]);
          const obj = {
            title: "beihai",
            11: 12,
            time: new Date(),
          };
          const str = "jkhjkhdsalkjf";
          const arr = ref([9, 8, 7, 6, 5, 4, 3, 2, 1]);
          return {
            person,
            obj,
            str,
            arr,
          };
        },
      }).mount("#app");
    </script>
  </body>
</html>
